<template>
  <div class="circular-progress" :style="{ width: size + 'px', height: size + 'px' }">
    <svg class="progress-circle" :width="size" :height="size">
      <circle
        class="progress-bg"
        :cx="center"
        :cy="center"
        :r="radius"
        fill="none"
        :stroke="bgColor"
        :stroke-width="strokeWidth"
      />
      <circle
        class="progress-bar"
        :cx="center"
        :cy="center"
        :r="radius"
        fill="none"
        :stroke="progressColor"
        :stroke-width="strokeWidth"
        :stroke-dasharray="circumference"
        :stroke-dashoffset="strokeDashoffset"
        :transform="`rotate(-90 ${center} ${center})`"
        stroke-linecap="round"
      />
    </svg>
    <div class="progress-text" v-if="showText">
      {{ Math.round(progress) }}%
    </div>
  </div>
</template>

<script setup>
import { computed, defineProps } from 'vue'

// 定义 props
const props = defineProps({
  // 进度值 (0-100)
  progress: {
    type: Number,
    default: 0,
    validator: (value) => value >= 0 && value <= 100
  },
  // 圆形大小
  size: {
    type: Number,
    default: 24
  },
  // 线条宽度
  strokeWidth: {
    type: Number,
    default: 2
  },
  // 进度条颜色
  progressColor: {
    type: String,
    default: '#006CFF'
  },
  // 背景圆圈颜色
  bgColor: {
    type: String,
    default: '#71B0FF'
  },
  // 是否显示百分比文字
  showText: {
    type: Boolean,
    default: true
  },
  // 文字颜色
  textColor: {
    type: String,
    default: '#ffffff'
  },
  // 文字大小
  textSize: {
    type: Number,
    default: 10
  }
})

// 计算属性
const center = computed(() => props.size / 2)
const radius = computed(() => (props.size - props.strokeWidth) / 2)
const circumference = computed(() => 2 * Math.PI * radius.value)
const strokeDashoffset = computed(() => {
  const progressRatio = props.progress / 100
  return circumference.value - (progressRatio * circumference.value)
})
</script>

<style scoped>
.circular-progress {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.progress-circle {
  transform: rotate(-90deg);
}

.progress-bar {
  transition: stroke-dashoffset 0.3s ease;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  font-size: v-bind('textSize + "px"');
  color: v-bind('textColor');
  line-height: 1;
}
</style>